<template>
  <div class="header-content">
    <h3>welcome to 余珍安の个人博客</h3>
    <div class="block">
      <el-avatar :size="50" src="/avatar.jpg"></el-avatar>
    </div>
  </div>
  <div class="login-container">
    <span><el-link href="/blogs">主页</el-link></span>
    <el-divider direction="vertical"></el-divider>
    <span v-if="hasLogin">
    <el-link type="success" href="/blogEdit/0">发表博客</el-link>
          <el-divider direction="vertical"></el-divider>
    </span>
    <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>

    <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
  </div>
</template>

<script>
import * as constConfig from "../constData/ConstData";

export default {
  name: "Header",
  data() {
    return {
      hasLogin: false
    }
  },
  inject: ['reload'],
  methods: {
    logout() {
      this.$axios.get(constConfig.prefixApi + "/auth/logout").then(() => {
        this.$store.commit("REMOVE_AUTH_TOKEN")
        this.reload()
        this.$router.replace({path:"/"})
      })
    }
  },
  created() {
    if (localStorage.getItem(constConfig.tokenHeader)) {
      this.hasLogin = true
    }
  }
}
</script>

<style scoped>
.header-content {
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

.login-container {
  margin: 10px 0;
  text-align: center;
}
</style>